<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <EmojiGenerator />
      </el-col>
      <el-col :span="8">
        <div class="side-panel">
          <el-card class="quick-stats">
            <template #header>
              <div class="card-header">
                <h3>我的数据</h3>
              </div>
            </template>
            <div class="stats-grid">
              <div class="stat-item">
                <h4>{{ stats.totalGenerated || 0 }}</h4>
                <p>生成总数</p>
              </div>
              <div class="stat-item">
                <h4>{{ stats.todayGenerated || 0 }}</h4>
                <p>今日生成</p>
              </div>
              <div class="stat-item">
                <h4>{{ stats.favorites || 0 }}</h4>
                <p>收藏数</p>
              </div>
              <div class="stat-item">
                <h4>{{ stats.shares || 0 }}</h4>
                <p>分享数</p>
              </div>
            </div>
          </el-card>

          <el-card class="recent-history">
            <template #header>
              <div class="card-header">
                <h3>最近生成</h3>
                <router-link to="/history" class="view-all">
                  查看全部 <el-icon><ArrowRight /></el-icon>
                </router-link>
              </div>
            </template>
            <el-empty v-if="recentHistory.length === 0" description="暂无记录" />
            <div v-else class="history-list">
              <div v-for="item in recentHistory" :key="item.history_id" class="history-item">
                <el-image :src="getFullImageUrl(item.output_url)" fit="cover"></el-image>
                <div class="item-info">
                  <p class="prompt">{{ item.prompt_text }}</p>
                  <p class="time">{{ formatDate(item.created_at) }}</p>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import EmojiGenerator from './EmojiGenerator.vue'
import request from '../utils/request'

const API_BASE_URL = 'http://localhost:5000'
const stats = ref({})
const recentHistory = ref([])

const fetchStats = async () => {
  try {
    const userId = localStorage.getItem('userId')
    const response = await request.get(`${API_BASE_URL}/api/stats/${userId}`)
    stats.value = response.data
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

const fetchRecentHistory = async () => {
  try {
    const userId = localStorage.getItem('userId')
    const response = await request.get(`${API_BASE_URL}/api/history/${userId}?limit=5`)
    recentHistory.value = response.data.records || []
    console.log('最近生成记录',response);
    console.log('最近生成记录',recentHistory.value);
    
  } catch (error) {
    console.error('获取最近历史失败:', error)
  }
}

const getFullImageUrl = (url) => {
  if (!url) return ''
  return url.startsWith('http') ? url : `${API_BASE_URL}${url}`
}

const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

onMounted(() => {
  fetchStats()
  fetchRecentHistory()
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-color);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background-color: var(--background-color);
  border-radius: 8px;
}

.stat-item h4 {
  margin: 0;
  font-size: 24px;
  color: var(--primary-color);
}

.stat-item p {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--info-color);
}

.view-all {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--primary-color);
  font-size: 14px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: var(--background-color);
  border-radius: 8px;
}

.history-item .el-image {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-info .prompt {
  margin: 0;
  font-size: 14px;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-info .time {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--info-color);
}
</style> 